<template>
  <div class="gis">
    <!-- 导航组件 -->
    <div class="header">
      <nav-header />
    </div>

    <!-- 导航子控件 -->
    <!-- 隐藏和显示导航控件模块 -->
    <div v-if="selectMoudles" :class="['nav-controller', navShow ? 'left' : 'right']" @click="navShow = !navShow">
      <a-icon :type="navShow ? 'left' : 'right'" />
    </div>
    <out-line
      v-if="selectMoudles"
      :move="false"
      :class="['b-area', !navShow ? 'hide' : '']"
      :padding="0"
      :closeStatus="false"
    >
      <div v-for="(item, index) in moudles" :key="index">
        <tree
          v-show="selectMoudles == item.name"
          :data="item"
          @setSearchLayer="setSearchLayer"
          @onSelect="onSelect"
          @deleteSelect="deleteSelect"
          @onSelectLayer="onSelectLayer"
        />
      </div>
    </out-line>

    <!-- gis地图 -->
    <Map ref="gisMap" @showLayer="showLayer" @ready="ready" />

    <!-- gis地图控件 -->
    <Controls class="control" @changeZoom="changeZoom" @doPostion="doPostion"></Controls>

    <!-- c区可移动图层 -->
    <div v-for="item in layers" :key="item.data.id">
      <component
        :element="item.data"
        :position="item.position"
        :style="{ 'z-index': zIndex == item.data.id ? '3' : '2' }"
        :is="item.name"
        class="float"
        @onSelectLayer="onSelectLayer"
      ></component>
    </div>

    <!-- d区可移动图层 -->
    <div v-for="(item, index) in dLyers" :key="index">
      <component
        :element="item"
        :position="item.position"
        :style="{ 'z-index': zIndex == item.key ? '3' : '2' }"
        :is="item.name"
        class="float"
      ></component>
    </div>

    <!-- 企业搜索查询 -->
    <search
      ref="search"
      :element="searchLayer"
      :position="searchLayer.position"
      @setSearchLayer="setSearchLayer"
      @onSelectLayer="onSelectLayer"
      v-if="searchShow"
      :style="{ 'z-index': zIndex == searchLayer.id ? '3' : '2' }"
      class="float"
    />

    <!-- F区控件 -->
    <actions class="actions" ref="actions" @hideMoudle="hideMoudle" :selectOptions="selectOptions"></actions>
  </div>
</template>
<script>
  import NavHeader from './modules/navHeader'
  import Map from './modules/map'
  import OutLine from '@comp/gis/outline'
  import OutLineD from '@comp/gis/outlined'
  import Controls from './modules/controls'
  import Actions from './modules/actions'
  import Tree from '@comp/gis/tree'
  import Search from './modules/search'
  import Enterprise from './modules/enterprise'
  import AnEnterprise from './modules/enterprise/anEnterprise'
  import Sensitive from './modules/sensitive'
  import Park from './modules/park'
  import AnalysisData from './modules/park/analysisData'
  import {epDetailById, initialData, parkDetailById, sensitiveDetailById} from '@/api/gis'
  import {mapActions, mapState} from 'vuex'
  import _ from 'lodash'

  export default {
  components: {
    NavHeader,
    Map,
    OutLine,
    OutLineD,
    Controls,
    Actions,
    Tree,
    Search,
    Enterprise,
    Park,
    Sensitive,
    AnEnterprise,
    AnalysisData,
  },
  data() {
    return {
      navShow: true,
      searchShow: false, //搜索
      selectOptions: ['park', 'enterprise', 'sensitive'], //f区可视区域modules
      cameraData: {}, //视角
    }
  },
  computed: {
    ...mapState(['zIndex', 'layers', 'dLyers', 'selectMoudles', 'moudles', 'searchLayer', 'dPosition']),
  },
  methods: {
    ...mapActions(['setPosistion', 'deleteLayers', 'addLayers', 'deleteDLayers', 'reset', 'getTreeList', 'setFloor', 'setLayerKey', 'setZIndex']),
    //地图加载完成
    ready() {
      //初始化数据
      this.initData()
    },
    //初始化数据
    initData() {
      //初始化数据
    },
    //放大缩小
    changeZoom(val) {
      this.$refs.gisMap.changeZoom(val)
    },
    //视角初始化
    doPostion() {
      console.log("到这李没有=====");
      this.$refs.gisMap.doPostiontwo()
    },
    //点击树内容弹出图层
    onSelectLayer(val) {
      console.log(val, 'layer')
      //内容背景处理
      // this.setLayerKey(val.value)
      if (!this.layers[val.key]) {
        //图层定位
        const _postion = this.getLayerPosition()
        this[`add${val.name.replace(val.name[0], val.name[0].toUpperCase())}Layer`](val, _postion)
      }
    },
    //展示企业图层id
    addEnterpriseLayer(data, position) {
      const _this = this
      console.log(data)
      epDetailById({ id: data.value }).then((res) => {
        if (res.success) {
          const data = res.result.records || []
          let layerData = Object.assign(
            {},
            { data: data[0] },
            {
              position,
              name: 'enterprise',
            }
          )
          console.log(layerData, 'enterprise')
          _this.addLayers(layerData)
          _this.setZIndex(data[0].id)
        }
      })
    },
    //展示园区图层
    addParkLayer(data, position) {
      const _this = this
      console.log(data)
      parkDetailById({ id: data.value }).then((res) => {
        if (res.success) {
          const data = res.result.records || []
          let layerData = Object.assign(
            {},
            { data: data[0] },
            {
              position,
              name: 'park',
            }
          )
          console.log(layerData, 'park')
          _this.addLayers(layerData)
        }
      })
    },
    //展示敏感点图层
    addSensitiveLayer(data, position) {
      const _this = this
      console.log(data)
      sensitiveDetailById({ id: data.value }).then((res) => {
        if (res.success) {
          const data = res.result.records || []
          let layerData = Object.assign(
            {},
            { data: data[0] },
            {
              position,
              name: 'sensitive',
            }
          )
          console.log(layerData, 'sensitive')
          _this.addLayers(layerData)
        }
      })
    },
    //勾选显示或隐藏地图icon
    onSelect(val) {
      console.log(val, 'map-add')
      // console.log("弹窗数据======================",this.layers);
      this.deleteLayers()
      this.deleteDLayers()
      const _data = val.data[0]
      this.initialDatas(_data.value)
      console.log("企业查询的值=====",this.searchShow);

      // this.searchShow = false
      if(this.searchShow) {
        console.log("子组件===",this.$refs.search);
        this.$refs.search.pageNo = 1;
        this.$refs.search.pagination = {
          total: 0,
          pageIndex: 1,
          pageSize: 5,
        };
        this.$refs.search.searchMsg();
        // this.setSearchLayer(true)
      }
    },
    //初始化地图数据
    initialDatas(parkId) {
      //删除地图上所有的图形实例
      this.$refs.gisMap.reset()
      const params = {
        parkId,
      }
      initialData(params).then((res) => {
        if (res.success) {
          //处理数据
          const _data = !!res.result ? [res.result] : []
          //初始化定位系统
          if (_data[0].dot != null && _data[0].dot != '') {
            const _defaultPosition = JSON.parse(_data[0].dot)[0]
            //摄像头触发到默认位置
            this.$refs.gisMap.gotoDefaultPosition(_defaultPosition)
          }
          //如果没有点位信息，获取区域信息第一个位置的数据
          else if(_data[0].location != null && _data[0].location != ''){
            const _defaultPosition = JSON.parse(_data[0].location)[0][0]
            //摄像头触发到默认位置
            this.$refs.gisMap.gotoDefaultPosition(_defaultPosition)
          }
          const { dots, locations } = this.formDataLocations(_data)
          this.$refs.gisMap.showBillboard(dots)
          this.$refs.gisMap.showColorChart(locations)
        }
      })
    },
    formDataLocations(data) {
      let dots = [],
        locations = []
      for (let i = 0; i < data.length; i++) {
        const _dot = data[i].dot != null && data[i].dot != '' ? JSON.parse(data[i].dot) : []
        const _location = data[i].location != null && data[i].location != '' ? JSON.parse(data[i].location) : []
        const _show = this.selectOptions.indexOf(data[i].type) >= 0 ? true : false
        for (let j = 0; j < _dot.length; j++) {
          dots.push({
            id: `${data[i].type}-${data[i].id}-dot${j}`,
            type: data[i].type,
            show: _show,
            name: data[i].name,
            coordinates: {
              lng: _dot[j].lng,
              lat: _dot[j].lat,
            },
          })
        }
        for (let j = 0; j < _location.length; j++) {
          locations.push({
            id: `${data[i].type}-${data[i].id}-locations${j}`,
            type: data[i].type,
            show: _show,
            name: data[i].name,
            locations: _location[j],
          })
        }
        if (!!data[i].children && data[i].children.length > 0) {
          const _data = this.formDataLocations(data[i].children)
          dots.push(..._data.dots)
          locations.push(..._data.locations)
        }
      }
      return { dots, locations }
    },
    //减少
    deleteSelect(val) {
      console.log(val, 'delete')
      //删除地图上所有的图形实例
      this.$refs.gisMap.reset()
    },
    //清理gis地图图标数据
    deleteGisEntity(val) {
      this.$refs.gisMap.deleteEntity(val.type, val.data || [])
      let _newData = _.cloneDeep(this[val.type])
      val.data.map((item) => {
        _newData.map((items, indexs) => {
          if (item.key == items.key) {
            _newData.splice(indexs, 1)
          }
        })
      })
      this[val.type] = _newData
    },
    //显示或隐藏gis地图图标或者区域
    hideMoudle(modules) {
      console.log(modules, 'modules')
      const _No = this.selectOptions.indexOf(modules)
      let _flag = true //显示或者隐藏
      if (_No >= 0) {
        this.selectOptions.splice(_No, 1)
        _flag = false
      } else {
        this.selectOptions.push(modules)
      }
      this.$refs.gisMap.hideModules(_flag, modules)
    },
    //点击地图图标展示图层
    showLayer(params) {
      console.log(params, 'layer--show')
      //图层定位
      const _postion = this.getLayerPosition()
      // 展示摄像头监控图层
      const _name = params.id.split('-')
      const _type = _name[0]
      this[`add${_type.replace(_type[0], _type[0].toUpperCase())}Layer`]({ value: _name[1] }, _postion)
    },
    //设置搜索图层
    setSearchLayer(flag) {
      console.log("这是企业查询===",flag);
      this.searchShow = flag
    },
    //获取图层定位
    getLayerPosition() {
      const origin = Object.assign({}, this.dPosition)
      //添加图层
      const _right = origin.right + 10
      const _top = origin.top + 10
      const position = {
        right: _right + 'px',
        top: _top + 'px',
      }
      const _origin = {
        right: _right,
        top: _top,
      }
      this.setPosistion(_origin)
      return position
    },
  },
}
</script>
<style lang="less" scoped>
.gis {
  width: 100%;
  min-width: 1440px;
  height: 100vh;
  min-height: 800px;
  overflow: hidden;
  background: #f8f8f8;
  position: relative;
  .header {
    position: absolute;
    width: 100%;
    height: 46px;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .b-area {
    position: absolute;
    left: 24px;
    top: 105px;
    z-index: 4;
    transition: transform 0.2s linear;
    transform: translateX(0);
  }
  .hide {
    transform: translateX(-120%);
  }
  .control {
    position: absolute;
    bottom: 40px;
    left: 24px;
    z-index: 2;
  }
  .default {
    position: absolute;
  }
  .float {
    position: absolute;
  }
  .actions {
    position: absolute;
    bottom: 35px;
    right: 29px;
    z-index: 2;
  }
  .nav-controller {
    width: 17px;
    height: 58px;
    border: 1px solid #02e0f7;
    position: absolute;
    top: 121px;
    left: 8px;
    background: #19376d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
  }
  .left {
    top: 121px;
    left: 8px;
    border-radius: 5px 0 0 5px;
  }
  .right {
    top: 121px;
    left: 0px;
    border-radius: 0 5px 5px 0;
  }
  .cover {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.86);
    top: 0;
    left: 0;
    z-index: 33;
  }
}
</style>